<template>
  <div class="common-layout">
    <el-container>
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <!-- 左边的菜单栏 -->
        <el-row width="200px">
          <el-col :span="24">

            <div class="mb-2">
              <img src="/uploads/swim.png" alt="">
              <p>游泳运动会</p>
            </div>

            <el-menu active-text-color="#ffd04b" class="el-menu-vertical-demo" :default-active="openIndex"
              text-color="#111" :collapse="isCollapse" :collapse-transition="true" unique-opened router>
              <el-sub-menu index="1">
                <template #title>
                  <img src="/uploads/set.png" alt="">
                  <span>运动会基本信息设置</span>
                </template>
                <!-- index 跳转的页面 index里的name -->
                <el-menu-item index="/bci">
                  <template #title><span>竞赛基础信息</span></template>
                </el-menu-item>

                <el-menu-item index="/sexci">
                  <template #title><span>性别基础信息</span></template>
                </el-menu-item>

                <el-menu-item index="/groupci">
                  <template #title><span>组别基础信息</span></template>
                </el-menu-item>

                <el-menu-item index="/saibieci">
                  <template #title><span>赛别信息定义</span></template>
                </el-menu-item>

                <el-menu-item index="/recoedci">
                  <template #title><span>记录名称定义</span></template>
                </el-menu-item>

                <el-menu-item index="/memscore">
                  <template #title><span>自动计分标准</span></template>
                </el-menu-item>

                <el-menu-item index="/pcbasicinfo">
                  <template #title><span>项目基础信息</span></template>
                </el-menu-item>

                <el-menu-item index="/groupevent">
                  <template #title><span>各组竞赛项目</span></template>
                </el-menu-item>

                <el-menu-item index="/reinforeg">
                  <template #title><span>记录信息登记</span></template>
                </el-menu-item>

                <el-menu-item index="/unpire">
                  <template #title><span>裁判员信息</span></template>
                </el-menu-item>

              </el-sub-menu>
              <!-- 2 -->
              <el-sub-menu index="2">
                <template #title>
                  <img src="/uploads/plist.png" alt="">
                  <span>运动会报名信息管理</span>
                </template>

                <el-menu-item index="/compeunit">
                  <template #title><span>参赛单位信息</span></template>
                </el-menu-item>

                <el-menu-item index="/sportsige">
                  <template #title><span>运动员报名信息</span></template>
                </el-menu-item>
              </el-sub-menu>
              <!-- 3 -->
              <el-sub-menu index="3">
                <template #title>
                  <img src="/uploads/cal.png" alt="">
                  <span>运动会比赛秩序管理</span>
                </template>

                <el-menu-item index="/arrange">
                  <template #title><span>竞赛编排管理</span></template>
                </el-menu-item>

                <el-menu-item index="/schedule">
                  <template #title><span>竞赛日程管理</span></template>
                </el-menu-item>

                <el-menu-item index="/gamegroup">
                  <template #title><span>竞赛分组管理</span></template>
                </el-menu-item>
              </el-sub-menu>
              <!-- 4 -->
              <el-sub-menu index="4">
                <template #title>
                  <img src="/uploads/sign.png" alt="">
                  <span>运动会比赛成绩管理</span>
                </template>

                <el-menu-item index="/totalgrade">
                  <template #title><span>比赛总成绩管理</span></template>
                </el-menu-item>

                <el-menu-item index="/all_tound">
                  <template #title><span>全能总分名次</span></template>
                </el-menu-item>

                <el-menu-item index="/porecord">
                  <template #title><span>破纪录统计公告</span></template>
                </el-menu-item>

                <el-menu-item index="/gradesport">
                  <template #title><span>等级运动员管理</span></template>
                </el-menu-item>

                <el-menu-item index="/teamrank">
                  <template #title><span>团体成绩名次</span></template>
                </el-menu-item>

                <el-menu-item index="/gamemedal">
                  <template #title><span>运动会奖牌</span></template>
                </el-menu-item>

                <el-menu-item index="/escoreorder">
                  <template #title><span>项目成绩统计</span></template>
                </el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="5">
                <template #title>
                  <img src="/uploads/engine.png" alt="">
                  <span>运动会系统信息管理</span>
                </template>

                <el-menu-item index="/gradeNorn">
                  <template #title><span>运动会等级标准</span></template>
                </el-menu-item>

                <el-menu-item index="/itemGrade">
                  <template #title><span>全能项目成绩标准</span></template>
                </el-menu-item>

                <el-menu-item index="/printSample">
                  <template #title><span>各种打印样本</span></template>
                </el-menu-item>

                <el-menu-item index="/userMessage">
                  <template #title><span>用户信息管理</span></template>
                </el-menu-item>

                <el-menu-item index="/archive">
                  <template #title><span>数据库管理</span></template>
                </el-menu-item>
              </el-sub-menu>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
      <el-container class="top">
        <!-- 头部信息 -->
        <el-header class="top-1">
          <div class="toggle-button">
            {{ basafrom.cname }}
          </div>

          <el-dropdown>
            <span class="el-dropdown-link">
              <div class="block">
                <!-- 头像 -->
                <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
              </div>
              <p>{{ userName }}</p>
            </span>
            <template #dropdown>
              <el-dropdown-menu class="menu">
                <!-- <el-dropdown-item>
                  <router-link to="#">个人中心</router-link>
                </el-dropdown-item> -->
                <el-dropdown-item type="info" @click="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>

        </el-header>
        <el-main>
          <router-view />
        </el-main>
        <el-footer>
          <div class="version">
            <span>@当前版本号：{{ version }} || Copyright ©2023-2024 YaoLong Intelligence. All Rights Reserved.</span>
          </div>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import packageJson from '../../package.json'
export default {
  data() {
    return {
      openIndex: "/bci",
      isCollapse: false,
      userName: '',
      basafrom: {},
      version: packageJson.version
    }
  },
  created() {
    this.openIndex = this.$route.path

    let token = sessionStorage.getItem("stu_token");
    function decodeToken(token) {
      const base64Url = token.split('.')[1];
      const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
      const jsonPayload = decodeURIComponent(atob(base64).split('').map(function (c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
      }).join(''));

      return JSON.parse(jsonPayload);
    }
    const decodedToken = decodeToken(token);
    this.userName = decodedToken.username

    this.getGamenameList()
  },
  methods: {
    logout() {
      sessionStorage.removeItem('stu_token');
      this.$router.push('/');
    },
    async getGamenameList() {
      const result = await this.$http.post(this.BACKEND_URL + '/meeting/getmsg');
      if (result.data.code == 0) {
        this.basafrom = result.data.data
      } else if (result.data.code == 500) {
        console.log(result.data.msg)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.top {
  // background-color: #eaedf1;

  .el-footer {
    height: 20px;
    background: #eaedf1;
  }

  .top-1 {
    border-bottom: 1px solid #CDD0D6;

    .toggle-button {
      flex: 1;
      min-width: 200px;
      font-size: 20px;
      font-weight: bold;
      color: black;
      text-align: center;
    }
  }
}

// .common-layout .el-container {
// }
// 头部信息
.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 0;
  color: #fff;
}

// 除去下拉框鼠标移入标题时出现的边框
:focus {
  outline: 0 !important;
}

// 头像
.el-dropdown {
  width: 150px;

  .el-dropdown-link {
    width: 100%;
    display: flex;
    justify-content: center;

    .block {
      padding-right: 5px;
    }
  }
}

a {
  text-decoration: none;
  color: #111;
}

// 左边导航栏
.el-aside {
  min-height: calc(100vh);
  border-right: 1px solid #CDD0D6;

  .el-menu {
    border-right: none;
    border-top: 1px solid #CDD0D6;

    .el-menu-item {
      color: #6b6f72;
    }

    img {
      padding-right: 2px;
    }
  }
}

//  标题
.mb-2 {
  display: flex;
  height: 59px;
  justify-content: center;
  align-items: center;
  color: #1296db;
  font-weight: bold;
  font-size: 18px;

  // border-bottom: 1px solid #CDD0D6;
  img {
    width: 50px;
    height: 30px;
  }
}

// 子视图
.el-main {
  background: #eaedf1;
}

.el-menu .el-menu-item.is-active {
  color: #009EFA !important;
}
// 底部
.version {
  font-size: 14px;
  color: #8d8d8d;
}
</style>
